<script lang="ts" setup>
import { ref } from 'vue'
import TheWelcome from './components/TheWelcome.vue'
import SampleVue from './components/SampleVue.vue';
import SampleEcharts from './components/SampleEcharts.vue'
const shadowGroup = ref([
  {
    name: 'Basic Shadow',
    type: '',
  },
  {
    name: 'Light Shadow',
    type: 'light',
  },
  {
    name: 'Lighter Shadow',
    type: 'lighter',
  },
  {
    name: 'Dark Shadow',
    type: 'dark',
  },
])

const getCssVarName = (type: string) => {
  return `--el-box-shadow${type ? '-' : ''}${type}`
}
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header style="margin-top:14px; text-align: center;">
        <div
        id="head_div"
        :style="{
          boxShadow: `var(${getCssVarName(shadowGroup[2].type)})`,
        }"
      > 自动中台_beta</div>
    </el-header>
      <el-main>
        <TheWelcome/>
        <el-divider border-style="double" style="margin: 40px 0;"/>
        <SampleVue/>
        <el-divider border-style="double" />
        <SampleEcharts/>
      </el-main>
    </el-container>
  </div>
</template>



<style scoped>
#head_div{
  font-size: 24px;
  font-family: fantasy;
  width: fit-content;
}
</style>
